<template>
    <div class="upload_file">
		<van-form input-align="right" ref="uploadForm">
<!--      <van-notice-bar v-if="!detail.canUploadPhoto" wrapable :scrollable="false" text="当前状态无法上传或修改会议资料" />-->
      <div v-for="(item, index) in uploadForm" :label="item.desc" :key="'uploaddiv' + index">
          <div v-if="item.speaker">
              <van-divider content-position="left" :style="{ color: '#1989fa', borderColor: '#1989fa'}">{{item.desc}} | {{ item.tagName }}</van-divider>
              <div v-for="(spPhoto, spIndex) in item.itemList" :key="'speakerUpload' + spIndex">
				  <van-field :label="spPhoto.desc" required :border="false">
					  <template #input>
						  <uploadMutipart @deleteFile="deleteFile" @uploadSucc="uploadSucc" :maxFileCount="spPhoto.maxNum"
										  :type="spPhoto.label" :files="spPhoto.fileList" :capture="spPhoto.capture"></uploadMutipart>
					  </template>
				  </van-field>
				  <p class="van-hairline--bottom pb-2 mt-0">{{ spPhoto.condition }}</p>
			  </div>
          </div>
      </div>
      <div class="divider_box">
		  <van-divider content-position="left" :style="{ color: '#1989fa', borderColor: '#1989fa'}">会议其他照片</van-divider>
	  </div>
      <div v-for="(item, index) in uploadForm" :label="item.desc" :key="'uploaddivmeeting' + index">
          <div v-if="!item.speaker">
              <van-field :label="item.desc" required :border="false">
                <template #input>
                    <uploadMutipart @deleteFile="deleteFile" @uploadSucc="uploadSucc" :maxFileCount="item.maxNum"
                    :type="item.label" :files="item.fileList" :capture="item.capture"></uploadMutipart>
                </template>
              </van-field>
			  <p class="van-hairline--bottom pb-2 mt-0">{{ item.condition }}</p>
          </div>
      </div>

      <!-- <van-field v-for="(item, index) in uploadForm" :label="item.desc" :key="'uploaddiv' + index" required style="padding-right:0;">
          <template #input>
              <uploadMutipart @deleteFile="deleteFile" @uploadSucc="uploadSucc" :maxFileCount="item.maxNum"
              :type="item.label" :files="item.fileList"></uploadMutipart>
          </template>
      </van-field> -->
    </van-form>
    <van-row :gutter="20" justify="center" class="pb-4" style="margin-top: 30px">
        <van-col :span="20">
            <van-button :disabled="!detail.canUploadPhoto" block type="primary" @click="onSubmitHandler">提交</van-button>
        </van-col>
    </van-row>
    <van-back-top target=".footer-view" right="5vw" bottom="20vh" style="z-index:101" />
    </div>
</template>
<script>
import {computed} from "vue"
import {useStore} from 'vuex'
import {showNotify, showConfirmDialog, showDialog} from 'vant'
import uploadMutipart from "../uploadMutipart/index.vue"


export default{
  name: "uploadMeeting",
  components: { uploadMutipart },
  data() {
    return {

    }
  },
  setup() {
    const store = useStore()
    const {commit} = useStore()
    let uploadForm = computed(() => store.state.meeting.uploadForm)
    let detail = computed(() => store.state.meeting.meetingDetail)
    return {
        uploadForm, detail, store, commit
    }
  },
  watch: {

  },
  mounted() {
    this.store.dispatch('meeting/detailUploadForm')
  },
  methods: {
    onSubmitHandler() {
        this.store.dispatch('meeting/submitFile')
    },
    deleteFile(row) {
        this.store.commit('meeting/SET_MEETING_PHOTO_DEL', row)
    },
    uploadSucc(row) {
        this.store.commit('meeting/SET_MEETING_PHOTO', row)
    }


  }
};
</script>

<style>
.upload_file .van-cell {
	padding-left: 0;
	padding-right: 0;
}
.upload_file .van-uploader__wrapper {
	justify-content: flex-end;
}
.upload_file .van-uploader__preview,
.upload_file .van-uploader__upload {
	margin-left: var(--van-padding-xs);
	margin-right: 0;
}
.upload_file .divider_box {
	padding-top: 14px;
}
.upload_file .van-divider{
	margin-top: 0;
}
</style>
